<template>
  <div class="collect">
    <div class="header">
      <header>
        <div class="back">
          <i @click="back()" class="iconfont icon-fanhui"></i>
          <p>返回</p>
        </div>
      </header>
    </div>


      <!-- 收藏列表 -->
      <div class="mycollections">
        <ul>
          <li
            v-for="(item,index) in collectList"
            :key="index"
            @click="newDetail(index)"
          >
            <p>{{item.newId.title}}</p>
            <span>{{item.newId.className}}</span>
          </li>
        </ul>
      </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      signStatus:'',
      signinfo:'',
      collectList:[]
    }
  },
  created() {
    var token = localStorage.getItem('token')
    // 收藏列表
    this.$axios({
      method:'post',
      url:'/collectList',
      data:{
        token:token,
      }
    }).then(res=>{
      if(res.data.status=='success'){ 
        for(let i=0; i<res.data.data.length; i++){
          //过滤掉数据库没有的数据
          if(res.data.data[i]){
            this.collectList.push(res.data.data[i])
          }
        }
      }
    })
  },

  methods: {
    back(){
      this.$router.go(-1)
    },
       //收藏列表进入文章详情
       newDetail(index){
      this.$router.push({name:'newsDetail',query:{item:this.collectList[index]}})
    }
  },

}
</script>

<style scoped>
  .header{
    width: 100%;
    background: crimson;
  }
  header{
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
  }
  header .back{
    font-size: 35px;
    display: flex;
  }
  header .back i {
    color: white;
    font-size: 22px;
  }
  header .back p{
    color: white;
    font-size: 18px;
    margin-left: 10px;
  }

.mycollections ul li{
    padding: 10px 10px;
  }
  .mycollections ul li p{
    font-size: 20px;
  }
  .mycollections ul li span{
    font-size: 16px;
  }

</style>